<template>
  <section id="childComment">
    <div class="child_comment" v-if="commentData[0]">
      <div v-for="(item, index) in commentData" :key="index">
        <p @click="reComments(item.userinfo.name,item.comment_id)">
          <span v-if="item.userinfo.name">{{ item.userinfo.name }}</span>
          <span v-else>无昵称</span> 回复
          <span v-if="item.parent_user_info">{{ item.parent_user_info.name }}</span>：{{ item.comment_content }}
        </p>

        <div v-if="item.children[0]">
          <childComment :commentData="item.children" @reComments="reComments"/>
        </div>
      </div>

      
    </div>
  </section>
</template>

<script>
export default {
  props:["commentData"],
  name:"childComment",
  methods:{
    reComments(username,comment_id){
      this.$emit("reComments",username,comment_id)
    }
  }
};
</script>

<style lang="less" scoped>
#childComment {
  .child_comment {
    background-color: #f4f4f4;
    font-size: 3.611vw;
    border-radius: 1.389vw;
    p {
      line-height: 5.556vw;
      span {
        color: rgb(55, 127, 235);
      }
    }
  }
}
</style>
